<template>
  <div class="box">
    <div id="maincharts" ></div>
    <div id="maincharts2" ></div>
    <div id="maincharts3" ></div>
    <div id="maincharts4" ></div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
import { getuserall } from "../../service/user";
//男女比例
let list= ref([]);
let myChart = ref("");
let myChart2 = ref("");
let myChart3 = ref("");
let myChart4 = ref("");


onMounted(() => {
  getuserall().then((res) => {
    console.log(res);
    list.value = res.data.data;
    // list1.value = res.data.data.gender;
    drawChart(list.value);
    drawChart2(list.value);
    drawChart3(list.value);
    drawChart4(list.value);
  });
  myChart.value = echarts.init(document.getElementById("maincharts"));
  myChart2.value = echarts.init(document.getElementById("maincharts2"));
  myChart3.value = echarts.init(document.getElementById("maincharts3"));
  myChart4.value = echarts.init(document.getElementById("maincharts4"));
});
function drawChart(list) {
  myChart.value.setOption({
    title: {
      text: "千峰男女比例",
      subtext: new Date().toLocaleDateString(),
      left: "center",
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      left: "left",
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: "50%",
        data: list.gender,
      },
    ],
  });
}
function drawChart2(list) {
  myChart2.value.setOption({
    title: {
      text: "千峰学生来源",
      subtext: new Date().toLocaleDateString(),
      left: "center",
    },
    tooltip: {
      trigger: "item",
    },
    legend: {
      orient: "vertical",
      left: "left",
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: "50%",
        data: list.area,
      },
    ],
  });
}
function drawChart3(list) {
  myChart3.value.setOption({
    title: {
      text: "千峰学生分布",
      subtext: new Date().toLocaleDateString(),
      left: "center",
    },
    tooltip: {
      trigger: "item",
    },
    // legend: {
    //   orient: "vertical",
    //   left: "left",
    // },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: "50%",
        data: list.accessFrom,
      },
    ],
  });
}
function drawChart4(list) {
  myChart4.value.setOption({
    title: {
      text: "千峰男女比例",
      subtext: new Date().toLocaleDateString(),
      left: "center",
    },
    tooltip: {
      trigger: "item",
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: "50%",
        data: list.gender,
      },
    ],
  });
}
</script>

<style lang="scss" scoped>
.box{
  display: flex;
  padding: 10px;
  box-sizing: border-box;
  background-color: white;
  width: 100%;
  height: 100%;
  #maincharts{
    width:25% ;
    height: 400px;
  }
  #maincharts2{
    width:25% ;
    height: 400px;
  }
  #maincharts3{
    width:25% ;
    height: 400px;
  }
  #maincharts4{
    width:25% ;
    height: 400px;
  }
}
</style>
